<template>
	<view class="decision-content-tome">
		<view class="select-title mt10">
			<listSelect
				style="width: 200rpx"
				v-model="form.evType"
				@confirm="search"
				:list="evList"
				class="top1-item"
			></listSelect>
			<view class="line"></view>

			<listSelect
				style="width: 200rpx"
				v-model="form.level"
				@confirm="search"
				:list="levelList"
				class="top1-item"
			></listSelect>
			<!-- <view class="line"></view>
			<view @click="search" class="search-btn flex-cc">查询</view> -->
		</view>
		<view class="report-sv">
			<u-collapse ref="collapse" class="item-box-list" v-if="dataList.length > 0">
				<!-- -->
				<u-collapse-item
					v-for="(item, index) in dataList"
					:key="item.id"
					@change="(e) => fnColChange(e, item, index)"
					:class="{
						isActive: colShowList.includes(index)
					}"
				>
					<template slot="title-all">
						<view
							class="col-box"
							:style="{
								background: '#FFF7ED'
							}"
						>
							<view class="item-box">
								<!-- <u-icon size="30" name="bookmark-fill" color="#FF8A00"></u-icon> -->
								<i class="iconfont icon-a-wenben12" :style="{ color: '#FF8A00' }"></i>
								<text class="ml10" style="color: #70757a">{{ item.evLocation }}</text>
								<!-- <text class="ml10" style="color: #ff8a00">{{ item.evTime }}</text> -->
							</view>

							<view class="flex-vc">
								<view class="success-btn mr20 nop">待解决</view>

								<u-icon v-show="colShowList.includes(index)" name="arrow-up-fill" size="18" color="#607589"></u-icon>
								<u-icon v-show="!colShowList.includes(index)" name="arrow-down-fill" size="18" color="#607589"></u-icon>
							</view>
						</view>
					</template>
					<view
						class="body-cont"
						:style="{
							background: '#FFF7ED'
						}"
					>
						<view class="cont-sin">
							<view class="cont-sin-title">发起人</view>
							<view class="cont-sin-view">{{ item.userName }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">事件类型</view>
							<view class="cont-sin-view">{{ item.evType }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">严重程度</view>
							<view class="cont-sin-view">{{ labelLevel(item.evLevel) }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">事件描述</view>
							<view class="cont-sin-view">{{ item.evDescribe }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">事件时间</view>
							<view class="cont-sin-view">{{ item.evTime }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">事件地点</view>
							<view class="cont-sin-view">{{ item.evLocation }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">附件</view>
							<view class="cont-sin-view">
								<fileShow :files="item.fileUrls"></fileShow>
							</view>
						</view>

						<view class="cont-sin borUp flexD-vc pt10">
							<view class="cont-sin-title">处置过程</view>
							<view class="cont-sin-view">
								<view v-for="elSin in item.urgentEventLogs" :key="elSin.id" class="mt5 bot-bot">
									<text
										class="fs24"
										:style="{ color: elSin.statusName == '确认' ? '#0085FF' : '#52AF9F', width: '120rpx' }"
									>
										<text class="mr3">✳</text>
										{{ elSin.statusName }}
									</text>

									<view>
										<text class="ml10">{{ elSin.updateUserName }}</text>
										<text class="ml10">{{ elSin.userPhone }}</text>
										<text class="ml10">{{ elSin.updateTime | dateStr('YYYY-MM-DD HH:mm') }}</text>
									</view>
								</view>
							</view>
						</view>

						<view class="info-deal" v-if="!isCity && item.urgentEventLogs.length == 1">
							<view class="info-btn" @click="sure(item)"> 确认 </view>
							<view class="success-btn ml10" @click="deal(item)"> 继续上报 </view>
						</view>
						<view class="info-deal" v-if="isCity && isShowByCity(item.urgentEventLogs)">
							<view class="info-btn" @click="sure(item)"> 确认 </view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
			<u-empty text="暂无数据" mode="list" v-else></u-empty>
		</view>

		<u-picker
			mode="time"
			:default-time="form.time"
			v-model="timeShow"
			:params="timeParams"
			@confirm="confirmTime"
		></u-picker>

		<u-modal
			v-model="show"
			:content="type == 'up' ? '确认继续上报？' : '是否确认此事件？'"
			show-cancel-button
			@confirm="confirm"
			@cancel="show = false"
		></u-modal>
	</view>
</template>
<script>
	import listSelect from '@/components/common/select/listSelect.vue'
	import sjsbApi from '@/api/yjzh/sjsb.js'
	import moment from 'moment'
	import eventTool from '@/utils/event'
	export default {
		name: '',
		components: { listSelect, fileShow: () => import('./cpn/fileShow.vue') },
		data() {
			return {
				isCity: this.UserInfoData.dept.code == '350400000000',
				form: {
					evType: 'all',
					time: '2023-04',
					statusType: 0,
					level: 'all'
				},

				timeShow: false,
				timeParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},

				dataList: [],
				colShowList: [],

				show: false,
				evList: [{ label: '所有事件', value: 'all' }],
				levelList: [{ label: '所有等级', value: 'all' }],

				type: 'up' // up ok
			}
		},
		computed: {},
		async mounted() {
			this.initPage()
			const res = await eventTool.getTypeJson()
			this.evList.push(...res.evTypeList)
			this.levelList.push(...res.evLevelList)
		},
		methods: {
			async initPage() {
				const resp = await sjsbApi.reportEvent({
					areaCode: this.UserInfoData.dept.code,
					evTypeCode: this.form.evType != 'all' ? this.form.evType : undefined,
					evLevel: this.form.level != 'all' ? this.form.level : undefined
				})
				if (resp.code == 200) {
					this.dataList = resp.data
				}
			},
			labelLevel(value) {
				console.info(`value:`, value)
				let item = this.levelList.find((el) => el.value == value)
				return item.label
			},
			search() {
				this.$nextTick(() => {
					this.initPage()
				})
			},

			async fnColChange(e, val, idx) {
				this.colShowList = []
				if (!e.show) {
					return
				}
				this.colShowList.push(idx)
				// this.pageData.childSignals = []
				// uni.showLoading({
				// 	title: '加载中'
				// })
				// let params = {
				// 	pid: val.pid
				// }
				// let res = await warnApi.GetProcessList(params)
				// if (res.success) {
				// 	this.pageData.childSignals = res.data.map((item) => {
				// 		item.cTime1 = moment(item.cTime).format('MM-DD HH:mm')
				// 		return item
				// 	})
				// 	this.$nextTick(() => {
				// 		this.$refs.collapse.init()
				// 	})
				// } else {
				// 	// uni.showToast({
				// 	// 	icon: 'error',
				// 	// 	title: '获取失败'
				// 	// })
				// }
				// this.$hideLoading()
			},

			deal(item) {
				this.type = 'up'
				this.show = true
				this.preItem = item
				console.info(`item:`, item)
			},
			async confirm() {
				let resp = null
				// const userInfo = uni.getStorageSync('userInfo')
				let params = {
					urgentEventId: this.preItem.id,
					areaCode: this.UserInfoData.dept.parentCode || this.UserInfoData.dept.code,
					userId: this.UserInfoData.id,
					userName: this.UserInfoData.nickName,
					areaName: this.UserInfoData.deptName,
					userPhone: this.UserInfoData.phone
				}
				if (this.type == 'up') {
					resp = await sjsbApi.report(params)
				} else {
					resp = await sjsbApi.confirm(params)
				}
				if (resp.code == 200) {
					uni.showToast({
						icon: 'info',
						title: '操作成功'
					})
					this.initPage()
				} else {
					uni.showToast({
						icon: 'error',
						title: '操作失败'
					})
				}
			},
			sure(item) {
				this.type = 'ok'
				this.show = true
				this.preItem = item
				console.info(`item:`, item)
			},
			isShowByCity(urgentEventLogs) {
				const index = urgentEventLogs.find((el) => {
					return el.statusName == '确认'
				})
				console.info(`index:`, index)
				if (index) {
					return false
				} else {
					return true
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.decision-content-tome {
		width: 100%;
		height: 100%;
		padding: 10rpx 24rpx;
		.select-title {
			width: 100%;
			height: 60rpx;
			background: #e4f2ff;
			border-radius: 4rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 0 10rpx;
			.line {
				height: 35rpx;
				width: 5rpx;
				color: #607589;
				background: #607589;
				border-radius: 10rpx;
				margin: 0 15rpx;
				opacity: 0.25;
			}
			.search-btn {
				width: 123rpx;
				height: 50rpx;
				background: #41a4ff;
				border-radius: 4rpx;
				color: #fff;
				letter-spacing: 10rpx;
			}
		}

		.report-sv {
			width: 100%;
			height: calc(100% - 160rpx);
			font-size: 26rpx;
			overflow: auto;
			/deep/.u-collapse-head {
				padding: 0rpx 0;
			}
			.isActive {
				border: 1rpx solid #ff8a00;
			}
			.u-collapse-item {
				margin: 10rpx 0;
			}
			.col-box {
				background: #edf5ff;
				font-size: 26rpx;
				width: 100%;
				padding-right: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				padding: 0 10rpx;
				// border-bottom: 1rpx solid rgba(0, 0, 0, 0.071);
			}
			.success-btn {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 7rpx 15rpx;
				background: #fff7ed;
				border: 1rpx solid #ff8a00;
				border-radius: 4rpx;
				color: #ff8a00;
			}
			.danger-btn {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 7rpx 15rpx;
				background: #fff7ed;
				border: 1rpx solid #ff0000;
				border-radius: 4rpx;
				color: #ff4747;
			}

			.info-btn {
				width: 150rpx;
				// width: 100rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 7rpx 15rpx;
				background: #41a4ff;
				border: 1rpx solid #41a4ff;
				border-radius: 4rpx;
				color: #fff;
			}

			.info-deal {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				border-top: 2rpx solid rgba(96, 117, 137, 0.121);
				padding: 10rpx 0;
			}
			.borUp {
				border-top: 2rpx solid rgba(96, 117, 137, 0.121);
			}

			.body-cont {
				width: 100%;
				font-size: 26rpx;
				border-top: 2rpx solid rgba(96, 117, 137, 0.121);
				border-bottom: 2rpx solid rgba(96, 117, 137, 0.12);
				padding: 0 20rpx;
				.cont-sin {
					width: 100%;
					display: flex;
					margin: 10rpx 0;
					.cont-sin-title {
						width: 120rpx;
						text-align: right;
						font-size: 26rpx;
					}
					.cont-sin-view {
						margin-left: 25rpx;
						font-size: 26rpx;
						flex: 1;
						color: #000;
						.bot-bot {
							margin: 5rpx 0;
							// border-bottom: 1rpx solid rgba(102, 102, 102, 0.13);
							padding-bottom: 2rpx;
							padding-right: 10rpx;
							// margin-left: -25rpx;
						}
					}
				}
			}
		}
	}
</style>
